"use client";
import { memo } from "react";
import type { ReactNode, FC } from "react";
import styles from "./style.module.scss";
import Link from "next/link";
interface IProps {
  children?: ReactNode;
  icon: string;
  iconShow: boolean;
  name: string;
  moreLink: string;
  keywords: string[];
}

const CommonHeader: FC<IProps> = (props) => {
  const { icon, iconShow, name, moreLink, keywords } = props;
  return (
    <>
      <div
        className={`${styles.cHeaderWrapper} ${
          iconShow ? icon : styles.iconHidden
        }`}
      >
        <div className={styles.headerLeft}>
          {moreLink != "" ? (
            <Link href={moreLink} className={styles.title}>
              {name}
            </Link>
          ) : (
            <span className={styles.title}>{name}</span>
          )}
          <div className={styles.list}>
            {keywords.map((item) => {
              return (
                <div className={styles.item} key={item}>
                  <a>{item}</a>
                  <span>|</span>
                </div>
              );
            })}
          </div>
        </div>
        <div className={styles.headerRight}>
          {moreLink != "" && (
            <>
              <Link href={moreLink}>更多</Link>
              <i className={`${styles.icon} sprite_02`}></i>
            </>
          )}
        </div>
      </div>
    </>
  );
};

export default memo(CommonHeader);
